<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 21:21:30
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-05 22:27:05
-->
<template>
  <div class="page-wrapper">
    <div class="toolbar">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>系统管理</a-breadcrumb-item>
          <a-breadcrumb-item>角色管理</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-space>
        <a-button type="primary" @click="onHandleCreate" v-auth="'Create'">
          <template #icon>
            <PlusOutlined />
          </template>
          添加角色
        </a-button>
        <a-button type="primary" :loading="loading" @click="queryList">
          <template #icon>
            <SyncOutlined />
          </template>
          刷新
        </a-button>
        <!-- <a-button type="primary">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button> -->
      </a-space>
    </div>
    <div class="container">
      <div class="table">
        <a-table
          bordered
          sticky
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
  </div>
  <!-- 修改角色 -->
  <EditView
    v-model:visible="popupModel.visible"
    :action="popupModel.action"
    :id="popupModel.id"
    v-if="popupModel.visible"
    @success="queryList"
  />
  <!-- 编辑权限 -->
  <edit-permission
    v-model:visible="editPermissionModel.visible"
    v-if="editPermissionModel.visible"
    :provider-key="editPermissionModel.providerKey"
    :provider-name="editPermissionModel.providerName"
    @success="editPermissionModel.visible = false"
  />
</template>

<script lang="ts" setup>
import {
  PlusOutlined,
  EyeOutlined,
  SyncOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { useListPage } from "@/helpers/pages";
import { checkActionStyle } from "@/helpers";
import api from "@/api/system/role";
import { RoleDto } from "@/api/system/types";
import { h, onMounted, ref } from "vue";
import { PaginationConfig } from "ant-design-vue/es/pagination";
import {
  Button,
  ButtonGroup,
  message,
  Popconfirm,
  Switch,
} from "ant-design-vue";
import EditView from "./Edit.vue";
import EditPermission from "./EditPermission.vue";

type IPermissionPopupModel = {
  visible: boolean;
  providerKey: string;
  providerName: string;
};
const {
  loading,
  dataSource,
  columns,
  pagination,
  popupModel,
  createQueryModel,
  onHandleCreate,
  onHandleUpdate,
} = useListPage<RoleDto, string>({
  columns: [
    { dataIndex: "name", title: "角色名称" },
    {
      dataIndex: "extraProperties.displayName",
      title: "显示名称",
      customRender({ record }) {
        return record.extraProperties.displayName;
      },
    },
    {
      dataIndex: "isDefault",
      title: "默认角色",
      align: "center",
      width: 100,
      customRender({ value }) {
        return h(Switch, { size: "small", disabled: true, checked: value });
      },
    },
    {
      dataIndex: "isStatic",
      title: "内置角色",
      align: "center",
      width: 100,
      customRender({ value }) {
        return h(Switch, { size: "small", disabled: true, checked: value });
      },
    },
    {
      dataIndex: "isPublic",
      title: "公共角色",
      align: "center",
      width: 100,
      customRender({ value }) {
        return h(Switch, { size: "small", disabled: true, checked: value });
      },
    },
    {
      dataIndex: "action",
      title: "操作",
      width: 210,
      customRender: ({ record }) => {
        return h(ButtonGroup, [
          h(
            Button,
            {
              type: "primary",
              size: "small",
              ghost: true,
              disabled: record.isDefault || record.isStatic,
              style: checkActionStyle("Update"),
              onClick() {
                onHandleUpdate(record);
              },
            },
            {
              icon() {
                return [h(EditOutlined)];
              },
              default() {
                return "修改";
              },
            }
          ),
          h(
            Button,
            {
              type: "primary",
              size: "small",
              ghost: true,
              style: checkActionStyle("Update"),
              onClick() {
                editPermissionModel.value = {
                  visible: true,
                  providerKey: record.name,
                  providerName: "R",
                };
              },
            },
            {
              icon() {
                return [h(EyeOutlined)];
              },
              default() {
                return "权限";
              },
            }
          ),
          h(
            Popconfirm,
            {
              title: "删除提示",
              description: "确定要删除当前选择行数据信息吗？",
              disabled: record.isDefault || record.isStatic,
              onConfirm() {
                onDeleteItem(record);
              },
            },
            h(
              Button,
              {
                style: checkActionStyle("Delete"),
                disabled: record.isDefault || record.isStatic,
                danger: true,
                size: "small",
              },
              {
                icon() {
                  return [h(DeleteOutlined)];
                },
                default() {
                  return "删除";
                },
              }
            )
          ),
        ]);
      },
    },
  ],
});

const editPermissionModel = ref<IPermissionPopupModel>({
  visible: false,
  providerKey: "",
  providerName: "R",
});

const onDeleteItem = async (item: RoleDto) => {
  let callback = message.loading("数据操作中，请稍后");
  await api.delete(item.id);
  callback();
  await queryList();
};

const queryList = async () => {
  loading.value = true;
  let result = await api.getList(createQueryModel()).finally(() => {
    loading.value = false;
  });
  dataSource.value = result.items;
  pagination.total = result.totalCount;
};

const handleTableChange = (pageConfig: PaginationConfig, filters: any) => {
  pagination.current = pageConfig.current;
  queryList();
};

onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped></style>
